<template>
  <div class="real-time-clock">
    <!-- 显示日期和时间 -->
    <div class="datetime">
      <dv-decoration-3 style="" />
      <div class="time">{{ formattedTime }}</div>
      <div class="data">{{ formattedDate }}</div>
      <div class="week">{{ formattedWeek }}</div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'RealTimeClock',
  data() {
    return {
      currentTime: new Date() // 存储当前时间的响应式变量
    }
  },
  computed: {
    // 格式化日期（YYYY-MM-DD）
    formattedDate() {
      const year = this.currentTime.getFullYear()
      const month = this.padZero(this.currentTime.getMonth() + 1) // 月份从0开始需要+1
      const date = this.padZero(this.currentTime.getDate())
      return `${year}-${month}-${date}`
    },
    // 格式化时间（HH:mm:ss）
    formattedTime() {
      const hours = this.padZero(this.currentTime.getHours())
      const minutes = this.padZero(this.currentTime.getMinutes())
      const seconds = this.padZero(this.currentTime.getSeconds())
      return `${hours}:${minutes}:${seconds}`
    },
    formattedWeek() {
      const weekDays = ['Sun.', 'Mon.', 'Tues.', 'Wed.', 'Thurs.', 'Fri.', 'Sat.']
      return weekDays[this.currentTime.getDay()]
    }
  },
  methods: {
    // 补零函数：将单位数转为双位字符串（如 9 -> "09"）
    padZero(num) {
      return num < 10 ? `0${num}` : num.toString()
    },
    // 更新时间
    updateTime() {
      this.currentTime = new Date()
    }
  },
  mounted() {
    // 初始化立即更新时间
    this.updateTime()
    // 设置定时器每秒更新
    this.timer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.real-time-clock {
  padding: 20px;
  border-radius: 8px;
  display: inline-block;
}

.datetime {
  color: #f4f6fa;
  font-weight: bold;
  letter-spacing: 1px;
}

.time{
  font-size: 3.5em;
}

.data .week{
  font-family:'Time';
}

.dv-decoration-3{
  width:80%;
  height:15%;
  position: absolute;
  top: 2%;
  margin-left: 5%;
  margin-right: 5%;
}

@font-face {
    font-family: "Time";
    src: url('../assets/fonts/gia.ttf');
    font-weight: normal;
    font-style: normal;
}

</style>